<template>
  <div class="service-station-dividend">
    <c-title :text="text"></c-title>
    <div class="head">
      <div class="head-content">
        <van-image width="58" height="58" round :src="member.avatar" />
        <span class="name">{{member.nickname}}</span>
      </div>
    </div>
    <div class="statistics">
      <div>
        <p class="money">{{ $i18n.t("money") }}{{ unsettled }}</p>
        <p>未结算</p>
      </div>
      <div>
        <p class="money">{{ $i18n.t("money") }}{{ settled }}</p>
        <p>已结算</p>
      </div>
    </div>
    <div class="main">
      <van-tabs v-model="active" title-active-color="#EF5452" color="#FB6B68" @click="tabChange">
        <van-tab title="全部"></van-tab>
        <van-tab title="未结算"></van-tab>
        <van-tab title="已结算"></van-tab>
      </van-tabs>
      <div class="list">
        <div class="list-item" v-for="(item,index) in list" :key="item.id">
          <div class="between mb-10">
            <span>{{ item.order_sn }}</span>
            <span class="c-fb6b68">{{ $i18n.t("money") }}{{ item.amount }}</span>
          </div>
          <div class="between">
            <span class="c-6A6A6A fz-24">{{ item.created_at }}</span>
            <span class="fz-24">{{ item.status_name }}</span>
          </div>
          <div class="line" v-if="index+1!==list.length"></div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { scrollMixin } from "../../../utils/mixin";
import { Image as VanImage } from 'vant';
export default {
  mixins: [scrollMixin],
  components: { VanImage },
  data() {
    return {
      text: "",
      active: 0,
      settled: "",
      unsettled: "",
      member:{},

      list: [],
      isLoadMore: true,
      page: 1,
      total_page: 0,
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    tabChange() {
      this.getData();
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      }
      let page = this.page + 1;
      this.getData(page);
    },
    getData(page = 1) {
      let json = { page };
      if (this.active !== 0) {
        if (this.active == 1) {
          json.type = 'unsettled';
        } else {
          json.type = 'settled';
        }
      }
      $http.get("plugin.unicom-server-station.frontend.settlement.index", json, "").then(({ result, msg, data }) => {
        this.isLoadMore = true;
        if (result) {
          this.page = data.settlements.current_page;
          this.total_page = data.settlements.last_page;
          this.text = data.plugin_name;
          this.member = data.member;
          this.settled = data.settled;
          this.unsettled = data.unsettled;
          this.fun.setWXTitle(data.plugin_name);
          (page == 1) ? (this.list = data.settlements.data) : (this.list = this.list.concat(data.settlements.datata));
        } else {
          this.$toast(msg);
        }
      })
    }
  }
};
</script>

<style scoped lang="scss">
.service-station-dividend {
  padding-bottom: 0.625rem;

  .main {
    margin: 0 0.9375rem;
    border-radius: 0.3125rem;
    overflow: hidden;
  }

  .mb-10 {
    margin-bottom: 0.3125rem;
  }

  .head {
    height: 8rem;
    background: #fb6b68;
  }

  .list-item {
    position: relative;
    padding: 0.8125rem 0.5625rem 0.625rem;

    .line {
      position: absolute;
      content: "";
      height: 1px;
      background: #f2f2f2;
      bottom: 0;
      left: 0.5625rem;
      right: 0.5625rem;
    }
  }

  .head-content {
    display: flex;
    padding: 1.75rem 0 0 1.75rem;
  }

  .name {
    color: #fff;
    padding-left: 1rem;
    padding-top: 0.2rem;
  }

  .money {
    color: #fb6b68;
    font-size: 1.125rem;
    padding-bottom: 0.2rem;
  }

  .statistics {
    background: #fff;
    margin: -1.6rem 0.9375rem 0.9375rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 2;
    border-radius: 0.3125rem;
    padding: 0.7813rem 0;
  }

  .fz-24 {
    font-size: 0.75rem;
  }

  .c-6A6A6A {
    color: #6a6a6a;
  }

  .c-fb6b68 {
    color: #fb6b68;
  }

  .list {
    background: #fff;
  }

  .between {
    display: flex;
    justify-content: space-between;
  }
}
</style>
